<template>
  <div class="min-h-screen bg-gray-50 pb-20">
    <!-- 顶部日期选择器 -->
    <div class="bg-white shadow-sm sticky top-0 z-10">
      <div class="flex items-center justify-between p-4 max-w-lg mx-auto">
        <button class="p-2" @click="previousDay">
          <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
        </button>
        <div class="text-lg font-medium">{{ formattedDate }}</div>
        <button class="p-2" @click="nextDay">
          <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 记录卡片区域 -->
    <div class="max-w-lg mx-auto p-4 space-y-4">
      <!-- 饮水量卡片 -->
      <div class="bg-white rounded-xl shadow-sm p-4">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
              </svg>
            </div>
            <div>
              <div class="font-medium">饮水量</div>
              <div class="text-sm text-gray-500">目标: 2000ml</div>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <button class="p-2 hover:bg-gray-100 rounded-full transition-colors" @click="water -= 200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
              </svg>
            </button>
            <input type="number" v-model="water" 
                   class="w-20 text-center border rounded-lg px-2 py-1">
            <button class="p-2 hover:bg-gray-100 rounded-full transition-colors" @click="water += 200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="bg-blue-50 rounded-lg overflow-hidden">
          <div class="h-2 bg-blue-500 rounded-lg transition-all duration-300" 
               :style="{ width: `${(water / 2000) * 100}%` }"></div>
        </div>
      </div>

      <!-- 卡路里卡片 -->
      <div class="bg-white rounded-xl shadow-sm p-4">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
              </svg>
            </div>
            <div>
              <div class="font-medium">卡路里</div>
              <div class="text-sm text-gray-500">目标: 2000kcal</div>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <button class="p-2 hover:bg-gray-100 rounded-full transition-colors" @click="calories -= 100">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
              </svg>
            </button>
            <input type="number" v-model="calories" 
                   class="w-20 text-center border rounded-lg px-2 py-1">
            <button class="p-2 hover:bg-gray-100 rounded-full transition-colors" @click="calories += 100">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="bg-green-50 rounded-lg overflow-hidden">
          <div class="h-2 bg-green-500 rounded-lg transition-all duration-300" 
               :style="{ width: `${(calories / 2000) * 100}%` }"></div>
        </div>
      </div>

      <!-- 体重卡片 -->
      <div class="bg-white rounded-xl shadow-sm p-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
              </svg>
            </div>
            <div>
              <div class="font-medium">体重</div>
              <div class="text-sm text-gray-500">每日记录</div>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <input type="number" v-model="weight" step="0.1"
                   class="w-20 text-center border rounded-lg px-2 py-1">
            <span class="text-gray-500">kg</span>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Footer from "../views/footer.vue"

// 日期相关
const currentDate = ref(new Date())
const formattedDate = computed(() => {
  return currentDate.value.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// 记录数据
const water = ref(0)
const calories = ref(0)
const weight = ref(0)

// 日期切换
const previousDay = () => {
  currentDate.value = new Date(currentDate.value.setDate(currentDate.value.getDate() - 1))
}

const nextDay = () => {
  currentDate.value = new Date(currentDate.value.setDate(currentDate.value.getDate() + 1))
}
</script>

<style scoped>
/* 移除输入框的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 添加渐变背景 */
.bg-blue-500 {
  background: linear-gradient(to right, #60a5fa, #3b82f6);
}

.bg-green-500 {
  background: linear-gradient(to right, #4ade80, #22c55e);
}

/* 添加阴影效果 */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 添加悬浮效果 */
.rounded-xl {
  transition: transform 0.2s ease-in-out;
}

.rounded-xl:hover {
  transform: translateY(-1px);
}
</style>
